<template>
  <el-row>
    <el-col :xs="22" :sm="16" :md="14" :lg="12" :xl="10" style="padding: 30px;">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="司机手机号">
          <el-input v-model="form.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="司机姓名">
          <el-input v-model="form.driverName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" class="filter-item" placeholder="请选择性别">
            <el-option
              v-for="item in genderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆">
          <el-select v-model="form.carId" class="filter-item" placeholder="请绑定车辆">
            <el-option
              v-for="item in carList"
              :key="item.id"
              :label="item.fullName"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            :headers="uploadHeader"
            class="avatar-uploader"
            action="http://localhost:8888/manager/index/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :with-credentials="true">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="form.birthday"
            value-format="timestamp"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="form.country"></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="form.national"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-select
            style="width:100%"
            v-model="form.address"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="queryAddressMethod"
            :loading="loading"
            value-key="id"
            @change="pick"
          >
            <el-option
              v-for="item in addressList"
              :key="item.name"
              :label="item.name"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.note"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">注册</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>

import { getCarList } from '@/api/car'
import { addOrUpdateDriverInfo, searchAddress } from '@/api/driver'
import { getToken } from '@/utils/auth'

export default {
  name: 'AddDriver',
  data() {
    return {
      form: {
        phoneNumber: '',
        driverName: '',
        gender: 0,
        carId: null,
        headImg: null,
        birthday: null,
        country: '西安',
        national: '汉',
        address: null,
        addressLongitude: null,
        addressLatitude: null,
        note: '无'
      },
      carList: null,
      imageUrl: '',
      addressList: [],
      loading: false,
      genderOptions: [{
        label: '男', value: 0
      }, {
        label: '女', value: 1
      }]
    }
  },
  computed: {
    uploadHeader() {
      return {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  created() {
    this.getCar()
  },
  methods: {
    async getCar() {
      const param = {
        pageNO: 1,
        pageSize: 100
      }
      const res = await getCarList(param)
      this.carList = res.data.records
    },
    onSubmit() {
      console.log('submit!')
      this.$confirm('确认对司机【 ' + this.form.driverName + '】进行注册？', 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await addOrUpdateDriverInfo(this.form)
          this.$notify({
            title: '添加成功',
            dangerouslyUseHTMLString: true,
            message: `
            <div>司机: ${this.form.driverName} </div>
          `,
            type: 'success'
          })
          this.form = ''
          this.imageUrl = ''
        })
        .catch(err => {
          console.error(err)
        })
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.form.headImg = res.data
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      return true
      // const isJPG = file.type === 'image/jpeg'
      // const isLt2M = file.size / 1024 / 1024 < 2
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      // return isJPG && isLt2M
    },
    queryAddressMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          searchAddress(query).then((res) => {
            // console.log(res)
            this.addressList = res.data
          }).catch((e) => {
            console.log(e)
            this.addressList = []
          })
        }, 200)
      } else {
        this.addressList = []
      }
    },
    pick(poi) {
      console.log(poi)
      // 经纬度
      const loc = poi.location.split(',')
      this.form.addressLongitude = loc[0]
      this.form.addressLatitude = loc[1]
      // 拼接地址
      this.form.address = poi.pname + poi.cityname + poi.address + poi.name
      console.log(this.form.address)
    }
  }
}
</script>

<style scoped>
.components-container {
  position: relative;
  height: 100vh;
}

.left-container {
  height: 100%;
}

.right-container {
  background-color: #FCE38A;
  height: 200px;
}

.top-container {
  background-color: #FCE38A;
  width: 100%;
  height: 100%;
}

.bottom-container {
  width: 100%;
  background-color: #95E1D3;
  height: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
